<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div id="app" v-clock>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Store_id')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div style="display: flex;">
                    <img :src="storeInfo.logo" v-if="storeInfo.id"  width="50px" height="50px" />
                    <div style="margin: 0 30px 0px 10px;" v-if="storeInfo.id" >
                        <p>ID:{{ storeInfo.id }}</p>
                        <p>{{ storeInfo.name }}</p>
                    </div>
                    <a @click="selectStore()" class="btn btn-select btn-success"><i class="fa fa-bars"></i> {{storeInfo.id?'重新选择':'选择场馆'}} </a>
                </div>
                <input id="c-store_id" name="row[store_id]" data-rule="required" type="hidden" v-model="storeInfo.id">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Area')}:</label>
            <div class="col-xs-12 col-sm-8 ">
                <div class="btn btn-success" @click="addArea">
                    <i class="fa fa-plus"></i> 添加
                </div>
                <div class="area-list flex">
                    <div class="item" v-for="(s, k) in areaList">
                        <input data-rule="required" v-model="areaList[k]['name']" type="text" placeholder="请输入名称">
                        <div class="del" @click="deleteArea(k)">
                            X
                        </div>
                    </div>
                </div>

                <input id="area" name="row[area]" type="hidden" />
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Duration')}:</label>
            <div class="col-xs-12 col-sm-8">
                            
                <select  id="c-duration" data-rule="required" class="form-control selectpicker" name="row[duration]" @change="changeDuration()">
                    {foreach name="durationList" item="vo"}
                        <option value="{$key}" {in name="key" value="60"}selected{/in}>{$vo}</option>
                    {/foreach}
                </select>
    
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Timeprice')}:</label>
            <div class="col-xs-12 col-sm-8">
                <div v-if="storeInfo.id" class="col-xs-12">
                    <div class="row">
                        <div class="item col-xs-4 form-group" style="padding-right: 40px; margin-bottom: 0;" v-for="(s, k) in timePriceList.length-1">
                            <label class="control-label">{{timePriceList[k]['time']}} - {{timePriceList[k+1]['time']}}</label>
                            <input data-rule="required" class="form-control" name="row[price]" placeholder="请输入售价" type="text" v-model="timePriceList[k]['price']">
                        </div>
                        <input id="timeprice" name="row[timeprice]" type="hidden" />
                    </div>
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-xs-12" style="margin-left: 0;padding-left: 0;">
                            <label style="text-align: left;line-height: 34px;float: left;font-weight: normal;">{:__('Isholidayprice')}:</label>
                            <div class="col-xs-12 col-sm-2">
                                <select  id="c-isholidayprice" class="form-control selectpicker" name="row[isholidayprice]" @change="changeIsholidayprice()">
                                    {foreach name="isholidaypriceList" item="vo"}
                                        <option value="{$key}" {in name="key" value="0"}selected{/in}>{$vo}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="isholidayprice == 1">
                        <div class="item col-xs-4 form-group" style="padding-right: 40px; margin-bottom: 0;" v-for="(s, k) in holidaypriceList.length-1">
                            <label class="control-label">{{holidaypriceList[k]['time']}} - {{holidaypriceList[k+1]['time']}}</label>
                            <input data-rule="required" class="form-control" name="row[price]" type="text" placeholder="请输入售价" v-model="holidaypriceList[k]['price']">
                        </div>
                        <input id="holidayprice" name="row[holidayprice]" type="hidden" />
                    </div>

                </div>
                <div v-else>
                    <div style="line-height:34px; color : red;" >提示：时段收费是根据场馆营业时间和起定时长生成，请先选择场馆和起订时长。</div>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
            <div class="col-xs-12 col-sm-8">
                
                <div class="radio">
                {foreach name="statusList" item="vo"}
                <label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key" value="normal"}checked{/in} /> {$vo}</label> 
                {/foreach}
                </div>
    
            </div>
        </div>

    </div>
    
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>

<style>
    [v-clock] {display: none;}
    .btn-select{height: 34px;line-height: 34px;padding: 0 20px;}
    .flex{display: flex;flex-wrap: wrap;}
    .area-list .item{position: relative;width: 100px;margin-top: 15px;margin-right: 26px;}
    .area-list .item input{width: 115px;border: solid 1px #d2d6de;height: 34px;line-height: 34px;}
    .area-list .item .del{width: 16px;height: 16px;border-radius: 8px;position: absolute;right: -8px;top: -8px;background: #d2d6de;border-radius: 8px; line-height: 16px;text-align: center;font-size: 10px;}
</style>